<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
    <button type="button" @click="testMock">点击</button>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.echarts)
    this.myChart.setOption({
      title: {
        // 主标题
        text: "xAxis"
      },
      legend: {
        show: true
      },
      tooltip: {
        show: true
      },
      xAxis: {
        // 展示横坐标
        show: true,
        // 突出'羊毛衫'
        data: ['衬衫',
          {
            value: '羊毛衫',
            textStyle: {
              fontSize: 20,
              color: 'red'
            }
          }, '雪纺衫', '裤子', '高跟鞋', '袜子'],
        // 'top','bottom'
        position: "bottom",
        // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。
        offset: 10,
        // 坐标轴名称
        name: "商品名",
        // 坐标轴名称位置;'start'、'middle' 或者 'center'、'end'。
        nameLocation: "end",
        // 坐标轴名字旋转，角度值。
        nameRotate: 0,
        // 坐标轴名称的配置
        nameTextStyle: {
          color: "rgba(249, 34, 11, 1)",
          fontWeight: "normal",
          fontStyle: "normal",
          fontSize: 14,
          align: "left"
        },
        // 坐标轴轴线相关设置。
        axisLine: {
          show: true,
          // 轴线两边的箭头
          symbol: ['none', 'arrow'],
          // 轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）。
          symbolSize: [10, 15],
          lineStyle: {
            color: "rgba(38, 36, 36, 1)",
            width: 1,
            type: "dashed"
          }
        },
        // 坐标轴刻度相关配置
        axisTick: {
          show: true,
          alignWithLabel: true, // 可以保证刻度线和标签对齐
          // 标签间隔
          interval: 0,
          length: 5, // 坐标轴刻度的长度。
          inside: false, // 坐标轴刻度是否朝内，默认朝外。
          lineStyle: {
            // 线宽度
            width: 1,
            // 线类型，solid, dashed, dotted
            type: "dotted"
          },
          // 是否显示最小值的标签
          showMinLabel: true,
          // 是否显示最大值的标签
          showMaxLabel: true,

        },
        // 副刻度相关配置。注意：次刻度线无法在类目轴（type: 'category'）中使用。
        minorTick: {
          show: true,
          length: 10,
          splitNumber: 6,
          lineStyle: {
            color: "rgba(0,0,255,1)",
            width: 2,
            type: "dotted"
          }
        },
        // 刻度标签相关配置。
        axisLabel: {
          show: true,
          inside: false,
          rotate: 0,
          margin: 9, // 刻度标签与轴线之间的距离。
          formatter: '{value} kg',
          fontSize: 14,
          align: "center",
        },
        // 网格坐标轴在 grid 区域中的分隔线。
        splitLine: {
          show: true,
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#aaa', '#ddd'],
            width: 1,
            type: "dashed",
            opacity: 0.8 // 图形透明度。支持从 0 到 1 的数字
          }
        },
        // 次分隔线坐标轴在 grid 区域相关配置
        minorSplitLine: {
          show: true
        },
        // 坐标轴在 grid 区域中的分隔区域，
        splitArea: {
          show: false,
          areaStyle: {
            color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
            shadowBlur: 10, // 图形阴影的模糊大小
          }
        },
        // 坐标轴指示器配置项。
        axisPointer: {
          show: true,
          type: "line", // 'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器
          // 标签配置
          label: {
            show: true,
            precision: '2' // 文本标签中数值的小数点精度。
          },
        }
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '储量',
          type: 'bar',
          data: [15, 120, 136, 110, 110, 120]
        }
      ]
    })
  },
  methods: {
    testMock () {
      axios.get('/mock/echarts1').then(response => {
        this.myChart.setOption({
          series: [
            {
              name: '储量',
              type: 'line',
              data: response.data.data.items
            }
          ]
        })
        console.log('response', response.data.data.items)
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
